<template>
  <vab-dialog v-model="isShowDialog" :close-on-click-modal="true" show-fullscreen width="80%">
    <template #default>
      <CommonForm
        ref="commonFormRef"
        v-model="form"
        v-loading="formLoading"
        :layout-config="layoutConfig"
        :option="option"
        @on-cancel="onHandleCancel"
      />
    </template>
  </vab-dialog>
</template>

<script>
import { getDetails } from "@/api/mains";
import VabDialog from "@/plugins/VabDialog/index.vue";
import CommonForm from "@/plugins/form/CommonForm.vue";
import { TableColumnOrFormTypeEnum } from "@/plugins/commonType.enum";

export default defineComponent({
  name: "OrgUserInfo",
  components: {
    CommonForm,
    VabDialog
  },
  emits: { "on-success": null },
  setup(props, { expose }) {
    const state = reactive({
      detailUrl: "system/user",
      isShowDialog: false,
      formLoading: false,
      layoutConfig: {
        //form组件布局
        column: 2
      }
    });

    const form = ref({});
    const option = {
      column: [
        {
          label: "所属机构",
          type: TableColumnOrFormTypeEnum.SELECTTREE,
          dictUrl: "system/org/query",
          prop: "orgid",
          placeholder: "请选择机构"
        },
        {},
        {
          label: "登录名",
          prop: "userName",
          type: TableColumnOrFormTypeEnum.INPUT
        },
        {
          label: "用户昵称",
          prop: "nickName",
          type: TableColumnOrFormTypeEnum.INPUT
        },
        {
          label: "用户类型",
          prop: "userType",
          type: TableColumnOrFormTypeEnum.SELECT,
          dictCode: "UserType"
        },
        {
          label: "性别",
          prop: "sex",
          type: TableColumnOrFormTypeEnum.SELECT,
          dictCode: "sys_user_sex"
        },
        {
          label: "邮箱",
          prop: "email",
          type: TableColumnOrFormTypeEnum.INPUT
        },
        {
          label: "手机号码",
          prop: "phonenumber",
          type: TableColumnOrFormTypeEnum.INPUT
        },
        {
          label: "用户描述",
          prop: "memo",
          type: TableColumnOrFormTypeEnum.TEXTAREA,
          placeholder: "请输入用户描述",
          expand: 2
        }
      ],
      formConfig: {
        title: "基本信息",
        isInModal: true,
        disabled: true
      },
      btnsConfig: {
        save: {
          isShow: false
        }
      },
      rules: {}
    };
    const showDialog = async row => {
      state.formLoading = true;
      state.isShowDialog = true;
      if (row) {
        const res = await getDetails(state.detailUrl, row.id);
        form.value = res.data;
      } else {
        form.value = {};
      }
      state.formLoading = false;
    };

    const onHandleCancel = () => {
      state.isShowDialog = false;
    };

    expose({ showDialog });
    return {
      ...toRefs(state),
      form,
      option,
      onHandleCancel
    };
  }
});
</script>
